<template>
  <div class="app-container">
    <el-card class="tableset" shadow="never" :body-style="{ padding: '0px' }">
      <!-- 小标题 -->
      <div class="title">
        <span>故障申报</span>
        <el-button
          v-permission="['malfunction-add-declare']"
          type="primary"
          class="title-button-right"
          icon="el-icon-plus"
          style="margin-left: 0.5rem;"
          plain
          @click="openAddMalfunctionDialog"
        >故障申报</el-button>
      </div>
      <!-- 小标题 -->

      <!-- 搜索关键词 -->
      <div class="funtion">
        <el-input
          v-model="get_malfunction_info_list.keyword"
          placeholder="请输入关键词"
          class="input-with-select"
          clearable
          @keyup.enter.native="getMalfunctionInfoList"
        >
          <el-select
            slot="prepend"
            v-model="get_malfunction_info_list.keywordType"
            placeholder="请选择"
            class="option"
          >
            <el-option label="故障/错误代码" value="0" />
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getMalfunctionInfoList" />
        </el-input>
      </div>
      <!-- 搜索关键词 -->

      <!-- 数据表 -->
      <el-table
        v-loading="dataRequestLoading"
        element-loading-text="正在加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        class="table"
        :data="data_malfunction_info_list.data"
        highlight-current-row
        stripe
        style="width: 100%;"
        :height="tableHeight"
        :max-height="tableHeight"
        @selection-change="getSelection"
        @sort-change="changeSort"
        @filter-change="changefilter"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          label="所在区域"
          :filters="data_malfunction_info_list.filter_area"
          :filter-multiple="false"
          column-key="filterArea"
        >
          <template slot-scope="{ row }">
            <span>{{ area_id_text(row.area_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="打印机品牌及型号"
          :filters="data_malfunction_info_list.filter_printer"
          :filter-multiple="false"
          column-key="filterPrinter"
        >
          <template slot-scope="{ row }">
            <span>{{ printer_id_text(row.printer_id) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="故障/错误代码">
          <template slot-scope="{ row }">
            <span>{{ row.malfunction }}</span>
            <span v-if="row.error_code != null">[{{ row.error_code }}]</span>
          </template>
        </el-table-column>
        <el-table-column
          label="申报类型"
          :filters="declaration_type"
          :filter-multiple="false"
          column-key="filterDeclarationType"
        >
          <template slot-scope="{ row }">
            <span>{{ declaration_type_text(row.declaration_type) }}</span>
            <el-tag v-if="row.print_order_number != null || row.demand_order_number != null" type="warning" effect="dark">订</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="申报人类型"
          :filters="declaration_person"
          :filter-multiple="false"
          column-key="filterDeclarationPerson"
        >
          <template slot-scope="{ row }">
            <span>{{ declaration_person_text(row.declaration_person) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="申报人">
          <template slot-scope="{ row }">
            <span v-if="row.name != null">{{ row.admin_name }}</span>
            <span v-else-if="row.wechat_nick_name != null">{{ row.wechat_nick_name }}</span>
            <span v-else>普通用户</span>
          </template>
        </el-table-column>
        <el-table-column label="云打印订单号/需求订单号">
          <template slot-scope="{ row }">
            <span v-if="row.print_order_number != null">{{ row.print_order_number }}</span>
            <span v-else-if="row.demand_order_number != null">{{ row.demand_order_number }}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column
          label="申报状态"
          :filters="[{ value: '0', text: '未处理'}, { value: '1', text: '已处理' }, { value: '2', text: '待跟进' }]"
          :filter-multiple="false"
          column-key="filterIsDeal"
        >
          <template slot-scope="{ row }">
            <el-tag :type="is_deal[row.is_deal].color" effect="dark">{{ is_deal[row.is_deal].label }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="申报时间" sortable="custom" column-key="create_time" />
        <el-table-column fixed="right" label="操作" width="190px">
          <template slot-scope="{ row }">
            <el-button v-permission="['malfunction-audit-declare']" type="success" @click.stop="openDealMalfunctionDialog(row)">处理及查看</el-button>
            <el-button v-permission="['malfunction-change-declare']" type="primary" @click.stop="openEditMalfunctionDialog(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 数据表 -->

      <!-- 数据表左下方功能区 -->
      <div>
        <el-button
          v-permission="['malfunction-delete-declare']"
          type="danger"
          class="card-bottom-button-left"
          icon="el-icon-delete"
          style="margin-left: 0.5rem;"
          plain
          :disabled="deleteDisabled"
          @click="deleteMalfunctionInfo"
        >删除</el-button>
      </div>
      <!-- 数据表左下方功能区 -->

      <!-- 分页 -->
      <el-pagination
        class="pagination"
        background
        layout="total, sizes,prev, pager, next, jumper"
        :total="data_malfunction_info_list.total"
        :page-size="get_malfunction_info_list.pageSize"
        :page-sizes="[20, 50, 100]"
        :current-page="get_malfunction_info_list.currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      />
      <!-- 分页 -->
    </el-card>

    <!-- 处理故障申报 -->
    <el-dialog
      title="处理故障申报"
      :visible.sync="dealMalfunctionDialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form size="mini" label-width="100px">
        <el-form-item label="所在区域">
          <span>{{ change_Malfunction.area_id }}</span>
        </el-form-item>
        <el-form-item label="打印机品牌及型号">
          <span>{{ change_Malfunction.printer_id }}</span>
        </el-form-item>
        <el-form-item label="云打印机名称">
          <span>{{ change_Malfunction.cloud_printer_name }}</span>
        </el-form-item>
        <el-form-item label="申报类型">
          <span>{{ change_Malfunction.declaration_type }}</span>
        </el-form-item>
        <el-form-item label="故障/错误代码">
          <span>{{ change_Malfunction.malfunction }}</span>
          <span v-if="change_Malfunction.error_code != null">[{{ change_Malfunction.error_code }}]</span>
        </el-form-item>
        <div
          v-for="(item, index) in change_Malfunction.show_path"
          :key="index"
          style="text-align: center;"
        >
          <img :src="item.url" width="665" height="665"></img>
        </div>
        <el-form-item label="故障描述">
          <span>{{ change_Malfunction.describe }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="dealMalfunctionInfo(0)">标记为未处理</el-button>
        <el-button type="warning" @click="dealMalfunctionInfo(2)">标记为待跟进</el-button>
        <el-button type="success" @click="dealMalfunctionInfo(1)">标记为已处理</el-button>
      </span>
    </el-dialog>
    <!-- 处理故障申报 -->

    <!-- 新增/修改故障申报 -->
    <el-dialog
      :title="change_malfunction_title"
      :visible.sync="changeMalfunctionDialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="changeMalfunctionRulesForm"
        :model="change_Malfunction"
        status-icon
        size="mini"
        label-width="100px"
      >
        <el-form-item prop="declaration_type" :rules="rules.select" label="申报类型">
          <el-select v-model="change_Malfunction.declaration_type" placeholder="请选择申报类型">
            <el-option
              v-for="item in declaration_type"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="area_id" :rules="rules.select" label="所在区域">
          <el-select v-model="change_Malfunction.area_id" placeholder="请选择打印机所在区域">
            <el-option
              v-for="item in data_malfunction_info_list.filter_area"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="change_Malfunction.declaration_type === 0" label="打印机品牌及型号">
          <el-select v-model="change_Malfunction.printer_id" placeholder="请选择打印机品牌及型号" @change="getErrorCodeList">
            <el-option
              v-for="item in data_malfunction_info_list.filter_printer"
              :key="item.value"
              :label="item.text"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="change_Malfunction.printer_id != ''" label="错误代码">
          <el-select v-model="change_Malfunction.error_code_id" filterable placeholder="请选择错误代码">
            <el-option
              v-for="item in error_code"
              :key="item.error_code_id"
              :label="item.error_code"
              :value="item.error_code_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="malfunction" :rules="rules.input" label="故障">
          <el-input v-model="change_Malfunction.malfunction" placeholder="请输入故障" clearable />
        </el-form-item>
        <el-form-item label="上传图片描述">
          <el-upload
            action
            :auto-upload="false"
            list-type="picture-card"
            :file-list="change_Malfunction.show_path"
            :show-file-list="true"
            :limit="8"
            :on-change="changeUploadImage"
            :on-exceed="checkNumber"
            :on-preview="handlePictureCardPreviewImage"
            :on-remove="handleRemoveImage"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
        <el-form-item prop="describe" :rules="rules.input" label="故障描述">
          <el-input v-model="change_Malfunction.describe" type="textarea" :autosize="{ minRows: 5, maxRows: 5}" placeholder="请输入故障描述" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="changeMalfunctionDialog = false">取 消</el-button>
        <el-button type="primary" @click="changeMalfunctionInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增/修改故障申报 -->

    <!-- 查看图片dialog -->
    <el-dialog :visible.sync="imageDialog" custom-class="full-dialog">
      <img width="100%" :src="dialogImageUrl" alt></img>
    </el-dialog>
    <!-- 查看图片dialog -->

    <!-- 剪切图片dialog -->
    <el-dialog title="图片剪裁" :visible.sync="UploadImagerDialog" :close-on-click-modal="false">
      <div class="cropper-content">
        <div class="cropper" style="text-align:center">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :info="option.info"
            :output-size="option.size"
            :output-type="option.outputType"
            :can-scale="option.canScale"
            :auto-crop="option.autoCrop"
            :auto-crop-width="option.autoCropWidth"
            :auto-crop-height="option.autoCropHeight"
            :fixed-box="option.fixedBox"
            :fixed="option.fixed"
            :fixed-number="option.fixedNumber"
            :full="option.full"
            :can-move-box="option.canMoveBox"
            :original="option.original"
            :center-box="option.centerBox"
            :info-true="option.infoTrue"
          />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="UploadAvatarDialog = false">取 消</el-button>
        <el-button size="mini" type="primary" :loading="uploadLoading" @click="upLoadImage">确认</el-button>
      </div>
    </el-dialog>
    <!-- 剪切图片dialog -->
  </div>
</template>

<script>
import { getFormData } from '@/common/js/until'
import { uploadImage } from '@/api/upload'
import { getMalfunctionInfoList, changeMalfunctionInfo, deleteMalfunctionInfo, dealMalfunctionInfo, getErrorCodeList } from '@/api/malfunction-manage'

export default {
  data() {
    return {
      // table高度自适应
      tableHeight: window.innerHeight - 265,

      // loading开关
      dataRequestLoading: false,

      // 按钮开关
      deleteDisabled: true,

      // loading开关
      uploadLoading: false,

      // dialog开关
      changeMalfunctionDialog: false,
      UploadImagerDialog: false,
      dealMalfunctionDialog: false,

      // 展示图片
      imageDialog: false,
      dialogImageUrl: false,

      // 图片裁剪框
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 665, // 默认生成截图框宽度
        autoCropHeight: 665, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: false, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },

      // 申报类型显示
      declaration_type: [
        { value: 0, text: '打印机' },
        { value: 1, text: '平板' },
        { value: 2, text: '小程序' }
      ],

      // 申报人类型显示
      declaration_person: [
        { value: 0, text: '普通用户' },
        { value: 1, text: '负责人' },
        { value: 2, text: '小程序用户' }
      ],

      // 申报状态显示
      is_deal: {
        0: { color: 'danger', label: '未处理' },
        1: { color: 'success', label: '已处理' },
        2: { color: 'warning', label: '待跟进' }
      },

      // 错误代码选择框
      error_code: [],

      // 请求故障申报信息列表参数
      get_malfunction_info_list: {
        pageSize: 20,
        currentPage: 1,
        keyword: '',
        keywordType: '0',
        sort_name: '',
        sort: 'desc',
        filterArea: '',
        filterPrinter: '',
        filterIsDeal: '',
        filterDeclarationType: '',
        filterDeclarationPerson: ''
      },

      // 故障申报信息列表返回值
      data_malfunction_info_list: {
        data: [],
        filter_area: [],
        filter_printer: [],
        total: 0
      },

      // 编辑故障申报dialog标题
      change_malfunction_title: '',

      // 编辑故障申报参数
      change_Malfunction: {
        malfunction_id: '',
        area_id: '',
        printer_id: '',
        cloud_printer_name: '',
        declaration_type: '',
        malfunction: '',
        error_code_id: '',
        error_code: '',
        path: [],
        show_path: [],
        describe: ''
      },

      // 表单校验规则
      rules: {
        input: { required: true, message: '请完成输入！', trigger: 'blur' },
        select: { required: true, message: '请完成选择！', trigger: 'blur' }
      }
    }
  },
  mounted() {
    this.getMalfunctionInfoList() // 查询故障申报信息列表
  },
  methods: {
    // 查询故障申报信息列表
    getMalfunctionInfoList() {
      this.dataRequestLoading = true
      getMalfunctionInfoList(this.get_malfunction_info_list).then(res => {
        res.result.showing.forEach(val => {
          val.path = JSON.parse(val.path)
        })
        this.data_malfunction_info_list = {
          data: res.result.showing,
          filter_area: res.result.filter_area,
          filter_printer: res.result.filter_printer,
          total: res.result.total
        }
        this.dataRequestLoading = false
      })
    },

    // 显示所在区域
    area_id_text(data) {
      const area_id = this.data_malfunction_info_list.filter_area.filter(v => {
        if (v.value === data) {
          return v.text
        }
      })
      return area_id[0].text
    },

    // 显示打印机品牌及型号
    printer_id_text(data) {
      const printer_id = this.data_malfunction_info_list.filter_printer.filter(v => {
        if (v.value === data) {
          return v.text
        }
      })
      if (printer_id.length === 0) {
        return '暂无'
      } else {
        return printer_id[0].text
      }
    },

    // 显示申报类型
    declaration_type_text(data) {
      const declaration_type = this.declaration_type.filter(v => {
        if (v.value === data) {
          return v.text
        }
      })
      return declaration_type[0].text
    },

    // 显示申报人类型
    declaration_person_text(data) {
      const declaration_person = this.declaration_person.filter(v => {
        if (v.value === data) {
          return v.text
        }
      })
      return declaration_person[0].text
    },

    // 新增/修改故障申报
    changeMalfunctionInfo() {
      this.$refs.changeMalfunctionRulesForm.validate(valid => {
        if (valid) {
          changeMalfunctionInfo(this.change_Malfunction).then(res => {
            this.getMalfunctionInfoList()
            this.changeMalfunctionDialog = false
            this.$notify({
              title: '成功',
              message: '保存成功！',
              type: 'success'
            })
          })
        } else {
          return false
        }
      })
    },

    // 获取选择项
    getSelection(selection) {
      if (selection.length === 0) {
        this.deleteDisabled = true
      } else {
        this.deleteDisabled = false
      }
      this.selection = selection
    },

    // 删除故障申报信息（逻辑删除）
    deleteMalfunctionInfo() {
      this.$confirm('此操作将永久删除该故障申报信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const malfunction_id = []
        this.selection.forEach(val => {
          malfunction_id.push(val.malfunction_id)
        })
        deleteMalfunctionInfo({ malfunction_id: malfunction_id }).then(res => {
          this.$notify({
            title: '成功',
            message: '删除故障申报信息成功！',
            type: 'success'
          })
          this.getMalfunctionInfoList()
        })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },

    // 处理故障申报信息
    dealMalfunctionInfo(dealType) {
      dealMalfunctionInfo({ malfunction_id: this.change_Malfunction.malfunction_id, dealType: dealType }).then(res => {
        this.getMalfunctionInfoList()
        this.dealMalfunctionDialog = false
        this.$notify({
          title: '成功',
          message: '处理故障申报信息成功！',
          type: 'success'
        })
      })
    },

    // 打开新增故障申报界面
    openAddMalfunctionDialog() {
      this.change_malfunction_title = '新增故障申报'
      this.change_Malfunction = {
        malfunction_id: '',
        area_id: '',
        printer_id: '',
        cloud_printer_name: '',
        declaration_type: '',
        malfunction: '',
        error_code_id: '',
        error_code: '',
        path: [],
        show_path: [],
        describe: ''
      }
      this.changeMalfunctionDialog = true
    },

    // 打开修改故障申报界面
    openEditMalfunctionDialog(row) {
      this.change_malfunction_title = '修改故障申报'
      this.change_Malfunction = {
        malfunction_id: row.malfunction_id,
        area_id: row.area_id,
        printer_id: row.printer_id,
        cloud_printer_name: row.cloud_printer_name,
        declaration_type: row.declaration_type,
        malfunction: row.malfunction,
        error_code_id: row.error_code_id,
        error_code: row.error_code,
        path: row.path,
        show_path: [],
        describe: row.describe
      }
      if (row.path.length > 0) {
        row.path.forEach(val => {
          const image = {
            url: process.env.VUE_APP_BASE_API + val,
            path: val
          }
          this.change_Malfunction.show_path.push(image)
        })
      }
      this.changeMalfunctionDialog = true
    },

    // 查询错误代码选择框信息
    getErrorCodeList() {
      getErrorCodeList({ printer_id: this.change_Malfunction.printer_id }).then(res => {
        this.error_code = res.result.showing
      })
    },

    // 打开处理故障申报界面
    openDealMalfunctionDialog(row) {
      this.change_Malfunction = {
        malfunction_id: row.malfunction_id,
        area_id: this.area_id_text(row.area_id),
        printer_id: this.printer_id_text(row.printer_id),
        cloud_printer_name: row.cloud_printer_name ? row.cloud_printer_name : '暂无',
        declaration_type: this.declaration_type_text(row.declaration_type),
        malfunction: row.malfunction,
        error_code_id: row.error_code_id,
        error_code: row.error_code,
        path: row.path,
        show_path: [],
        describe: row.describe
      }
      if (row.path.length > 0) {
        row.path.forEach(val => {
          const image = {
            url: process.env.VUE_APP_BASE_API + val,
            path: val
          }
          this.change_Malfunction.show_path.push(image)
        })
      }
      this.dealMalfunctionDialog = true
    },

    // 打开剪切界面
    changeUploadImage(file, fileList) {
      const isLt5M = file.size / 1024 / 1024 < 2
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        fileList.pop()
        return false
      }
      if (file.raw.type !== 'image/jpeg' && file.raw.type !== 'image/png') {
        this.$message.error('上传图片只支持jpeg和png!')
        fileList.pop()
        return false
      }
      // 将图片地址赋值给裁剪框显示图片
      this.$nextTick(() => {
        fileList.pop()
        this.option.img = URL.createObjectURL(file.raw)
        this.UploadImagerDialog = true
      })
    },
    // 上传剪切后的图片
    upLoadImage() {
      this.$refs.cropper.getCropBlob(data => {
        const formData = getFormData(data, 'malfunction')
        uploadImage(formData).then(res => {
          const image = {
            url: process.env.VUE_APP_BASE_API + res.result,
            path: res.result
          }
          this.change_Malfunction.show_path.push(image)
          this.change_Malfunction.path.push(res.result)
          this.UploadImagerDialog = false
        })
      })
    },
    // 检测上传数量
    checkNumber() {
      this.$message({ type: 'warning', message: '只能上传八张图片！' })
    },
    // 查看放大图
    handlePictureCardPreviewImage(file) {
      this.dialogImageUrl = file.url
      this.imageDialog = true
    },
    // 删除对应图片
    handleRemoveImage(file, fileList) {
      const indexPath = this.change_Malfunction.path.indexOf(file.path)
      this.change_Malfunction.path.splice(indexPath, 1)
      const indexShowPath = this.change_Malfunction.show_path.indexOf(file)
      this.change_Malfunction.show_path.splice(indexShowPath, 1)
    },

    // 切换每页条数方法
    changePageSize(data) {
      this.get_malfunction_info_list.pageSize = data
      this.getMalfunctionInfoList()
    },

    // 切换页码方法
    changeCurrentPage(data) {
      this.get_malfunction_info_list.currentPage = data
      this.getMalfunctionInfoList()
    },

    // 更换排序
    changeSort({ column, order }) {
      if (column.columnKey === 'create_time') {
        switch (order) {
          case 'descending':
            this.get_malfunction_info_list.sort_name = 'create_time'
            this.get_malfunction_info_list.sort = 'desc'
            this.getMalfunctionInfoList()
            break
          case 'ascending':
            this.get_malfunction_info_list.sort_name = 'create_time'
            this.get_malfunction_info_list.sort = 'asc'
            this.getMalfunctionInfoList()
            break
          default:
            this.get_malfunction_info_list.sort_name = ''
            this.get_malfunction_info_list.sort = 'desc'
            this.getMalfunctionInfoList()
        }
      }
    },

    // 筛选记录者
    changefilter(filters) {
      if (filters.filterArea) {
        if (filters.filterArea.length === 0) {
          this.get_malfunction_info_list.filterArea = ''
        } else {
          this.get_malfunction_info_list.filterArea = filters.filterArea[0]
        }
      } else if (filters.filterPrinter) {
        if (filters.filterPrinter.length === 0) {
          this.get_malfunction_info_list.filterPrinter = ''
        } else {
          this.get_malfunction_info_list.filterPrinter = filters.filterPrinter[0]
        }
      } else if (filters.filterIsDeal) {
        if (filters.filterIsDeal.length === 0) {
          this.get_malfunction_info_list.filterIsDeal = ''
        } else {
          this.get_malfunction_info_list.filterIsDeal = filters.filterIsDeal[0]
        }
      } else if (filters.filterDeclarationType) {
        if (filters.filterDeclarationType.length === 0) {
          this.get_malfunction_info_list.filterDeclarationType = ''
        } else {
          this.get_malfunction_info_list.filterDeclarationType = filters.filterDeclarationType[0]
        }
      } else if (filters.filterDeclarationPerson) {
        if (filters.filterDeclarationPerson.length === 0) {
          this.get_malfunction_info_list.filterDeclarationPerson = ''
        } else {
          this.get_malfunction_info_list.filterDeclarationPerson = filters.filterDeclarationPerson[0]
        }
      }
      this.getMalfunctionInfoList()
    }
  }
}
</script>
